<template>
	<view style="overflow: hidden;" v-if="statusList">
		<view class="messageCard" v-for="(item,index) in statusList" :key="index">
			<view class="groupInfo">
				<view class="headImg">
					<image :src="item.groupAvatarUrl" mode="aspectFill"></image>
				</view>
				<view class="groupName">
					{{item.groupName}}
				</view>
			</view>
			<view class="messageInfo">
				<view class="successInfo">
					{{item.status}}
				</view>
				<view class="timeItem">
					<view class="timeDetail">
						开定时间
					</view>
					<view class="time">
						{{item.expectOpenOrderTime}}
					</view>
				</view>
				<view class="timeItem">
					<view class="timeDetail">
						预计截定日期
					</view>
					<view class="time">
						{{item.expectCloseOrderTime}}
					</view>
				</view>
				<view class="timeItem">
					<view class="timeDetail">
						预计尾款时间
					</view>
					<view class="time">
						{{item.expectFinalPaymentTime}}
					</view>
				</view>
			</view>
			<view class="goodsInfo">
				<view class="goodsCover" @click="goGoodsDetail(item.goodsId)">
					<image :src="item.goodsCoverUrl" mode="widthFix"></image>
				</view>
				<view class="goodsRole">
					<view class="goodsName">
						{{item.goodsName}}
					</view>
					<view class="expectQuantity">
						预计套数：{{item.expectQuantity}}
					</view>
					<!-- <view class="realQuantity">
						可排套数：{{item.realQuantity}}
					</view> -->
				</view>
				<view class="confirmBtn" v-if="item.status==='等待开定'">
					撤销谷子
				</view>
				<view class="confirmBtn" v-if="item.status==='正在截排'" @click="showMask($event,item.goodsId)">
					立即截排
				</view>
				<view class="confirmBtn" v-if="item.status==='截排成功'" @click="completeOrder($event,item.goodsId)">
					完成订单
				</view>
				<view class="confirmBtn" v-if="item.status==='订单完成'" @click="getOrderExcel($event,item.goodsId)">
					一键导表
				</view>
			</view>
		</view>
	</view>
	<view v-else class="">
		{{title}}
	</view>
	
</template>


<script>
	export default {
		name:"leaderMessage",
		props:['statusList','closeMask'],
		emits:['statusChange','completeOrder','getExcel'],
		data() {
			return {
				title:'暂无数据',
			};
		},
		methods:{
			// changeStatus(){
			// 	// console.log(this.goodsId,this.expectQuantity)
				
			// },
			goGoodsDetail(id){
				uni.navigateTo({
					url:`/pages/goodsDetails/goodsDetails?goodsId=${id}`
				})
			},
			completeOrder(e,goodsId){
				this.$emit('completeOrder',goodsId)
			},
			showMask(e,goodsId){
				this.$emit('statusChange',goodsId)
			},
			getOrderExcel(e,goodsId){
				this.$emit('getExcel',goodsId)
			}
		}
	}
</script>

<style lang="scss">
.messageCard{
	margin: 20rpx;
	padding: 20rpx 20rpx 20rpx 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	border: 1rpx solid #ddd;
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
	.groupInfo{
		display: flex;
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		margin:0 0 20rpx 8rpx;
		.headImg{
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.messageInfo{
		color:#8DC7DF;
		font-size: 34rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: column;
		.timeItem{
			display: flex;
			font-size: 28rpx;
			color: #7f7f7f;
			line-height: 56rpx;
			.timeDetail{
				width: 200rpx;
			}
			.time{
				margin-left: 30rpx;
			}
		}
	}
	
	.goodsInfo{
		display: flex;
		position: relative;
		font-size: 30rpx;
		margin: 20rpx 0 0 20rpx;
		.goodsCover{
			width: 200rpx;
			image{
				width: 100%;
			}
		}
		.goodsRole{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 20rpx;
		}
		
		.confirmBtn{
			position: absolute;
			right: 16rpx;
			bottom: 16rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			color: #8DC7DF;
			border:1rpx solid  #E3F1F7;
			padding: 6rpx 18rpx;
			border-radius: 20rpx;
		}
	}
}

</style>